<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>state简写方式</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>


    <script type="text/babel">
        class Lss extends React.Component {
            state = {
                userName: "",
                passWord: ""
            }
            handleSubmit = (event) => {
                // 阻止默认的提交事件
                event.preventDefault();
                console.log('this', this);
                let { userName, passWord } = this.state
                alert(`我的用户名是${userName},我的密码是${passWord}`)
            }
            // 外传的形参是我们传递过去的类型，内层的形参是事件对象
            changeState = (which) => {
                return (e) => {
                    // console.log('which哪一个', which);

                    this.setState({[which]:e.target.value})

                    // 这种写法是不太优雅的写法，上面的比较优雅
                    // if (which == 'userName') {
                    //     this.setState({ userName: e.target.value })
                    // } else {
                    //     this.setState({ passWord: e.target.value })
                    // }

                }
            }
            render() {
                return (
                    <div>
                        <form action="https:www.baidu.com" onSubmit={this.handleSubmit}>
                            <input onInput={this.changeState('userName')} placeholder="请输入用户名" name="userName" />
                            <br />
                            <br />
                            <input onChange={this.changeState('passWord')} placeholder="请输入密码" name="passWord" />
                            <br />
                            <br />
                            <button>登录</button>
                        </form>
                    </div>
                )
            }
        }

        ReactDOM.render(<Lss />, document.querySelector('#test'))

        /**
         * 上述的案例就是高阶函数的用法举例
         *      什么是高阶函数？
         *          1. 接收的参数是一个函数，叫做高阶函数
         *          2. 返回的值是一个函数，也叫作高阶函数
         *       高阶函数也叫作函数柯里化
         * */

    </script>
</body>

</html>